<script setup lang="ts">
import { onMounted } from "vue";
import CommentMenu from "./CommentMenu.vue";
import { classFrontStore } from "@/stores/frontData/he/class";
import { getClassById } from "@/api/student/he/frontClass";
import { useRoute } from "vue-router";

import { getHMS } from "@/utils/time";
import router from "@/router";

const route = useRoute();
let id: any = route.query.id;

const store = classFrontStore();
store.classId = id;

onMounted(() => {
  getClassById(id).then((res) => {
    console.log(res);
    // classs.length == 0;
    if (res.data.msg == "请求成功") {
      store.getclasss(res.data.data);
      //   console.log(store.classs);
    }
  });
});

const buy = (id: any) => {
  router.push({
    path: "/paidMoney",
    query: {
      id: id,
    },
  });
};
</script>
<template>
  <div class="bigBox">
    <!-- <TopNav></TopNav> -->
    <div class="outbox">
      <div class="paid-nav">
        全部课程 > IT-互联网 > 互联网运营 > 新媒体运营 >
        思悦教育|短视频上热门好物推荐|短视频制作
      </div>
      <div class="paid-connect-box">
        <div class="paid-img">
          <div class="img-box">
            <el-image
              style="width: 100%"
              :src="store.classs[0].img"
              fit="fit"
            />
          </div>
        </div>
        <div class="paid-word">
          <div style="font-size: 19px; margin-bottom: 20px; margin-top: 10px">
            {{ store.classs[0].className }}
          </div>
          <div style="margin-bottom: 30px">
            {{
              store.classs[0].enlistsNum
            }}购买&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;好评度-&nbsp;&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;&nbsp;<span
              class="iconfont icon-fenxiang foottu"
            ></span
            >分享 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span
              class="iconfont icon-aixin_shixin foottu"
            ></span
            >收藏
          </div>
          <!-- <div>
            <button
              style="
                border: 1px solid rgb(0, 166, 255);
                background-color: white;
                color: rgb(0, 166, 255);
                margin-right: 10px;
              "
            >
              个人创业者
            </button>
            <button
              style="
                border: 1px solid rgb(0, 166, 255);
                background-color: white;
                color: rgb(0, 166, 255);
                margin-right: 10px;
              "
            >
              短视频创作者
            </button>
          </div> -->
          <div style="font-size: 12px; margin-top: 25px; margin-left: 20px">
            {{ store.classs[0].className }}
          </div>
          <div style="font-size: 12px; margin-top: 22px; margin-left: 20px">
            课程创立时间:{{ getHMS(store.classs[0].createTime) }}
          </div>
          <div
            style="
              margin-top: 35px;
              height: 30px;
              width: 100%;
              background-color: rgb(218, 218, 218);
              line-height: 30px;
            "
          >
            <span style="margin-left: 10px">
              ￥{{ store.classs[0].price }}</span
            >
          </div>
          <div
            style="
              height: 45px;
              width: 150px;
              background-color: rgb(0, 191, 255);
              color: white;
              font-size: 20px;
              text-align: center;
              line-height: 45px;
              margin-top: 25px;
              cursor: pointer;
            "
            @click="buy(id)"
          >
            立即购买
          </div>
        </div>
      </div>
    </div>
    <CommentMenu></CommentMenu>
    <!-- <FooterNav></FooterNav> -->
  </div>
</template>
<style scoped>
/* .bigBox {
  width: 80%;
  margin: auto;
} */
.paid-nav {
  height: 60px;
  width: 100%;
  line-height: 60px;
  /* border: 1px solid #ad5353; */
}
.outbox {
  width: 80%;
  margin: 0 auto;
}
.paid-connect-box {
  padding-top: 20px;
  height: 430px;
  width: 100%;
  /* outline: 1px solid #ad5353; */
}
.paid-img {
  /* outline: 1px solid #ad5353; */
  height: 380px;
  float: left;
  width: 30%;
  /* outline: 1px solid #ad5353; */
  height: 200px;
  background-color: rgb(210, 210, 210);
}
.paid-word {
  /* outline: 1px solid #ad5353; */
  height: 380px;
  float: left;
  width: 43%;
  padding-left: 24px;
}
</style>
